<!DOCTYPE html>
<html lang="zh" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"/>
    <title>用户列表 - 后台管理系统</title>
    <link rel="icon" href="images/favicon.ico" type="image/ico">
    <meta name="keywords" content="LightYear,光年,后台模板,后台管理系统,光年HTML模板">
    <meta name="description" content="LightYear是一个基于Bootstrap v3.3.7的后台管理系统的HTML模板。">
    <meta name="author" content="yinqi">
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="css/materialdesignicons.min.css" rel="stylesheet">
    <link href="css/style.min.css" rel="stylesheet">
    <script src="js/head.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <script src="js/login/login.js"></script>
    <script src="js/http.js"></script>
</head>

<body>
<div class="lyear-layout-web" id="vue">

    <div class="lyear-layout-container">
        <!--左侧导航-->
        <aside class="lyear-layout-sidebar">

            <!-- logo -->
            <div id="logo" class="sidebar-header">
                <a href="index.html"><img src="images/logo-sidebar.png" title="LightYear" alt="LightYear"/></a>
            </div>
            <div class="lyear-layout-sidebar-scroll">

                <nav class="sidebar-main">
                    <ul class="nav nav-drawer">
                        <script src="js/leftNav.js"></script>
                    </ul>
                </nav>
                <div class="sidebar-footer">
                    <p class="copyright">Copyright &copy; 2019. <a target="_blank"
                                                                   href="http://lyear.itshubao.com">IT书包</a> All rights
                        reserved.</p>
                </div>
            </div>

        </aside>
        <!--End 左侧导航-->

        <!--页面主要内容-->
        <main class="lyear-layout-content">

            <div class="container-fluid">

                <div class="row">
                    <div class="col-lg-12">
                        <div class="card">
                            <div class="card-toolbar clearfix">
                                <form class="pull-right search-bar" method="get" action="#!" role="form">
                                    <div class="input-group">
                                        <div class="input-group-btn">
                                            <input type="hidden" name="search_field" id="search-field" value="title">
                                            <button class="btn btn-default dropdown-toggle" id="search-btn"
                                                    type="button" aria-haspopup="true" aria-expanded="false" @click="changePageWalletList(1)">
                                                搜索
                                            </button>
                                        </div>
                                        <input type="text" class="form-control" value="" name="keyword" v-model="inputText"
                                               placeholder="请输入类别名称">
                                    </div>
                                </form>
                            </div>
                            <div class="card-body">

                                <div class="table-responsive">
                                    <table class="table table-bordered">
                                        <thead>
                                        <tr>
                                            <th>
                                                <label class="lyear-checkbox checkbox-primary">
                                                    <input type="checkbox" id="check-all"><span></span>
                                                </label>
                                            </th>
                                            <th>订单号</th>
                                            <th>用户ID</th>
                                            <th>交易金额</th>
                                            <th>处理前钱包余额</th>
                                            <th>交易类型</th>
                                            <th>下单时间</th>
                                        </tr>
                                        </thead>
                                        <tbody>
                                        <tr v-for="wallet in walletList">
                                            <td>
                                                <label class="lyear-checkbox checkbox-primary">
                                                    <input type="checkbox" name="ids[]" :value="wallet.id"><span></span>
                                                </label>
                                            </td>
                                            <td>{{wallet.walletCode}}</td>
                                            <td>{{wallet.userId}}</td>
                                            <td>{{wallet.money}}</td>
                                            <td><span v-if="wallet === null">暂无余额</span>
                                                <span v-else>{{wallet.beforeBalance}}</span>
                                            </td>
                                            <td>{{wallet.title}}</td>
                                            <td>{{wallet.createTime}}</td>
                                        </tr>
                                        </tbody>
                                    </table>
                                </div>

                                <ul class="pagination">
                                    <li class="prev"><a href="#!">«</a></li>
                                    <li @click="changePageWalletList(1)" class="pageNumber active" data-value="1"><a href="#">1</a></li>
                                    <li v-for="page in pages"  @click="changePageWalletList(page)" class="pageNumber" :data-value="page"><a href="#">{{page}}</a></li>
                                    <li class="next"><a href="#!">»</a></li>
                                </ul>
                            </div>
                        </div>
                    </div>

                </div>

            </div>

        </main>
        <!--End 页面主要内容-->
    </div>
</div>

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/perfect-scrollbar.min.js"></script>
<script type="text/javascript" src="js/main.min.js"></script>
<script type="text/javascript">
    $(function(){
        $('.deleteSelect').on("click",function(){
            let ids = [];
            $("tbody input[type='checkbox']").each(function(){
                if($(this).is(':checked')){
                    ids.push($(this).val());
                };
            });
            console.log(ids);
            $.ajax({
                type: "POST",
                url: baseUrl+"education_admin/wallet/deleteSelect",
                data: {
                    ids: ids
                },
                success: function (resp) {
                    let result = resp;
                    alert(result.message);
                    vm.showWalletList();
                }
            })
        });

        $(document).on("click",".next",function(){
            $(".active").next(".pageNumber").addClass("active").siblings().removeClass("active");
            let page = $(".pagination").children(".active").attr("data-value");
            vm.changePageWalletList(page);
        });

        $(document).on("click",".prev",function(){
            $(".active").prev(".pageNumber").addClass("active").siblings().removeClass("active");
            let page = $(".pagination").children(".active").attr("data-value");
            vm.changePageWalletList(page);
        });

        $(document).on("click",".pageNumber",function(){
            $(this).addClass("active");
            $(this).siblings().removeClass("active")
        });
    });

    let vm = new Vue({
        el: '#vue',
        data: {
            walletList: [],
            inputText:"",
            submitTypename:"",
            getWallet:{},
            inputText:"",
            pages:[],
            currentPage:1
        },
        methods: {
            fuzzyQueryWalletListList:function () {
                let thisObject = this;
                console.log(thisObject.inputText);
                console.log(thisObject.currentPage);
                $.ajax({
                    type: "GET",
                    url: baseUrl+"education_admin/wallet/getWallet",
                    data: {
                        walletCode: thisObject.inputText,
                        page: thisObject.currentPage
                    },
                    success: function (resp) {
                        let result = resp;
                        console.log(result.data.walletList)
                        vm.walletList = result.data.walletList;
                        vm.pages = [];
                        for(let i = 2;i <= result.data.pages;i++){
                            vm.pages.push(i);
                        }
                    }
                })
            },
            changePageWalletList: function (page=1){
                vm.currentPage = page;
                vm.fuzzyQueryWalletListList();
                $(".pageNumber").each(function (){
                    if(page == $(this).attr("data-value")){
                        $(this).addClass("active").siblings().removeClass("active")
                    }
                });
            },
        },
        mounted: function () {
            this.fuzzyQueryWalletListList();

        }
    })


</script>
</body>
</html>